"use client";
import styles from "./layout.module.css";
import { useColoContext } from "./context";
import { usePathname } from "next/navigation";
import { ReactNode, useEffect, useState } from "react";
import { useRefBodyValue } from "../../../../rou-context";
import * as _ from "lodash";
import Link from "next/link";

export default ({
  children,
  rightView,
}: {
  children: ReactNode;
  rightView: ReactNode;
}) => {
  const { color } = useColoContext();
  const refBody = useRefBodyValue();
  const pathname = usePathname();
  const [bbState, setBbState] = useState<string>("");

  useEffect(() => {
    const handleClick = () => {
      console.log("当前路由：" + pathname);
    };
    if (_.isEmpty(refBody)) {
      return;
    }
    const cur = refBody.refBody?.current;
    if (cur) {
      cur.addEventListener("click", handleClick);
    }

    return () => {
      if (cur) {
        cur.removeEventListener("click", handleClick);
      }
    };
  }, []);

  useEffect(() => {
    _.endsWith(pathname, "/b") && setBbState(pathname + "/bb");
  }, [pathname]);

  return (
    <table className={styles.myTable}>
      <tbody>
        <tr>
          <td className={styles.header} colSpan={2}>
            <Link href={`${bbState}`}> to bb </Link>
          </td>
        </tr>
        <tr>
          <td className={styles.cell} style={{ borderColor: color }}>
            {children}
          </td>
          <td className={styles.cell} style={{ borderColor: color }}>
            {rightView}
          </td>
        </tr>
      </tbody>
    </table>
  );
};
